<template>
  <v-chart
    :options="option"
    :autoresize="true"
    theme="chartsTheme"
  />
</template>
<script>
import dayjs from 'dayjs'
import { mapState, mapGetters } from 'vuex'

export default {

  data() {
    return {
      axisDataList: [],
      xianData: [],
      yulinData: [],
      yananData: [],
      xianyangData: [],
      hanzhongData: [],
      option: {
        color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
        title: {
          text: "分公司综合评分变化趋势"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["西安", "榆林", "延安", "咸阳", "汉中"]
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          left: '4%',
          right: '6%'
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: this.axisDataList,
        },
        yAxis: [{
          type: "value",
          // name: '评分',
          // nameGap: 10,
          min: 60,
          // max: 100,
          axisLabel: {
            formatter: "{value}"
          }
        }],
        series: [
          {
            name: "西安",
            type: "line",
            data: this.overallScoreTrendData,
            label: {
              show: false
            }
          },
          {
            name: "榆林",
            type: "line",
            data: this.yulinData,
            label: {
              show: false
            }
          },
          {
            name: "延安",
            type: "line",
            data: this.yananData,
            label: {
              show: false
            }
          },
          {
            name: "咸阳",
            type: "line",
            data: this.xianyangData,
            label: {
              show: false
            }
          },
          {
            name: "汉中",
            type: "line",
            data: this.hanzhongData,
            label: {
              show: false
            }
          }
        ]
      }
    }
  },
  watch: {
    overallScoreTrendData: {
      deep: true,
      handler(value) {
        console.log('服务人次------------------------新的值：', value)
        this.option.series[0].data = value;

        this.yulinData = []
        this.yananData = []
        this.xianyangData = []
        this.hanzhongData = []

        value.forEach(ele => {
          this.yulinData.push(ele.value - Math.round(Math.random()*2) -1)
          this.yananData.push(ele.value - Math.round(Math.random()*2) -2)
          this.xianyangData.push(ele.value - Math.round(Math.random()*2 -3))
          this.hanzhongData.push(ele.value - Math.round(Math.random()*2) -4)
        })
        this.option.series[1].data = this.yulinData
        this.option.series[2].data = this.yananData
        this.option.series[3].data = this.xianyangData
        this.option.series[4].data = this.hanzhongData

      }
    },
    axisDataList: {
      deep: true,
      handler (value) {
        this.option.xAxis.data = value
      }
    }
  },
  computed: {
    ...mapState(['overallScoreTrendData']),
    ...mapGetters(['monthXAxisDataList','dayWeekMonthStartEndTime'])
  },
  created () {
    this.axisDataList = this.monthXAxisDataList
    // for(let i=30; i>0; i--) {
    //   this.xianData.push(Math.round(Math.random()*2)+85)
    //   this.yulinData.push(Math.round(Math.random()*2)+82)
    //   this.yananData.push(Math.round(Math.random()*2)+80)
    //   this.xianyangData.push(Math.round(Math.random()*2)+78)
    //   this.hanzhongData.push(Math.round(Math.random()*2)+75)
    // }
    // console.log(this.xianData)
  }
}
</script>

<style lang="less">
</style>

